﻿<html>
<head>
<title>图片循环滚动</title>
</head>
<body>
<div id="demo" style=" overflow: hidden; width: 600px; height: 200px;"> 
	<table border="0" cellspacing="0" cellpadding="0"> 
		<tr> 
			<td style="text-align:center" id="marquePic1"> 
			<!-- 要循环滚动的图片 --> 
				<table width="455" border="0" style="text-align:center" 
				cellpadding="0" cellspacing="0" > 
					<tr style="text-align:center"> 
					<td><img width="200" height="166" border="1" 
					src="http://filesimg.111cn.net/2011/05/20111212010310983.png"></td>
					<td><img width="200" height="166" border="1" 
					src="http://filesimg.111cn.net/2011/05/20111212010316870.png"></td>
					<td><img width="200" height="166" border="1"  
					src="http://filesimg.111cn.net/2011/05/20111212010323234.png"></td>
					<td><img width="200" height="166" border="1"  
					src="http://filesimg.111cn.net/2011/05/20111212010329895.png"></td>
					<td><img width="200" height="166" border="1"  
					src="http://filesimg.111cn.net/2011/05/2011121201033672.png"></td>
					<td><img width="200" height="166" border="1"  
					src="http://filesimg.111cn.net/2011/05/20111212010342197.png"></td>
					</tr> 
				</table> 
			</td> 
			<td id="marquePic2" width="1"></td> 
		</tr> 
	</table> 
</div> 
<script language="javascript"> 
	var speed=30 ; //设置间隔时间 
	marquePic2.innerHTML=marquePic1.innerHTML; 
	var demo=document.getElementById("demo"); //获取demo对象 
	function Marquee(n){ //实现图片循环滚动的方法 
		if(marquePic1.offsetWidth-demo.scrollLeft<=0){  
			demo.scrollLeft=0;  
		} else{  
			demo.scrollLeft=demo.scrollLeft+n; 
		}  
	}  
	var MyMar=setInterval("Marquee(6)",speed); 
	demo.onmouseover=function() { //停止滚动 
		clearInterval(MyMar); 
	}  
	demo.onmouseout=function() { //继续滚动 
		MyMar=setInterval("Marquee(5)",speed); 
	} 
</script> 
</body>
</html>
